<template>
<div class='pageBox'>
	<table class="m-table" >
		<thead>
			<tr class="m-tr1">
					<th class="m-th">
					</th>
					<th class="m-th"  v-for="(item, index) in theadList" :key="index">
							{{ item.title }}
					</th>
			</tr>
  </thead>
		<tbody class="m-body" v-if="tableList">
			<tr class="m-tr" v-for="(data, index) in tableList.records" :key="index" >
					<td class="m-td" >
								{{	index+1 }}
					</td>
					<td class="m-td" >
								{{	data.xmmc }}
					</td>
					<td class="m-td" >
								{{	data.xzqhmc }}
					</td>
					<td class="m-td" >
								{{	data.kfsmc }}
					</td>
					<td class="m-td" >
								{{	data.wy }}
					</td>
					<td class="m-td" >
								{{	data.wss }}
					</td>
					<td class="m-td" >
								{{	data.ts }}
					</td>
					<td class="m-td" >
								{{	data.dj }}
					</td>
					<td class="m-td" >
								{{	data.mj }}
					</td>
					<td class="m-td" >
								{{	data.bzqk }}
					</td>
					<td class="m-td" >
								{{	data.bzyc }}
					</td>
			</tr>
		</tbody>
	</table>
</div>
</template>
<script setup>
import { ref,reactive, onMounted,onUnmounted,watchEffect} from 'vue';
// 接收参数
const props = defineProps({
  tableData: {
    type: Object,
    default: () => {},
  },
});
const tableList = ref(null)
watchEffect(() => {
	if(props.tableData){
		tableList.value = props.tableData
	
	}
});
const theadList = ref([
	{title:'项目名称'},
 {title:'地区'},
 {title:'开发商'},
 {title:'物业'},
 {title:'卧室数'},
	{title:'厅数'},
 {title:'单价(元)'},
 {title:'面积(m²)'},
 {title:'曝光情况'},
 {title:'保值预测'},
])
onMounted(() => {

});
</script>
<style scoped lang='less'>
.pageBox{
	width: 100%;
}
.m-table{
	width: 100%;
  border-collapse: separate;
  border-spacing: 0px 5px; /* 设置水平方向的间距为10px，垂直方向的间距为0 */

}
.m-tr1{
	background: linear-gradient( 60deg, rgba(14, 95, 255, 0.8) 0%, rgba(0, 255, 255, 0.6) 100%);
	
	.m-th{
		font-size: 12px;
		color: #f0f0f0;
		padding: 9px 0px;
		text-align: left
	}
}
.m-th:nth-child(1){
	width: 30px;
}
.m-th:nth-child(2){
	width: 60px;
}
.m-th:nth-child(3){
	width: 70px;
	text-align: center;
}
.m-th:nth-child(4){
	width: 60px;
	text-align: center;
}
.m-th:nth-child(5){
	width: 70px;
	text-align: center;
}
.m-th:nth-child(6){
	width: 50px;
	text-align: center;
}
.m-th:nth-child(7){
	width: 50px;
	text-align: center;
}
.m-th:nth-child(8){
	width: 70px;
	text-align: center;
}
.m-th:nth-child(9){
	width: 70px;
	text-align: center;
}
.m-th:nth-child(10){
	width: 100px;
	text-align: center;
}
.m-th:nth-child(11){
	width: 100px;
	text-align: center;
}

.m-tr{
	background: rgba(14,129,255,0.8);
	color: #f0f0f0;
	.m-td{
		height: 40px;
	}
}
.m-td:nth-child(1){
	width: 30px;
	text-align: center;
}
.m-td:nth-child(2){
	width: 60px;
	text-align: center;
}
.m-td:nth-child(3){
	width: 70px;
	text-align: center;
}
.m-td:nth-child(4){
	width: 60px;
	text-align: center;
}
.m-td:nth-child(5){
	width: 70px;
	text-align: center;
}
.m-td:nth-child(6){
	width: 50px;
	text-align: center;
}
.m-td:nth-child(7){
	width: 50px;
	text-align: center;
}
.m-td:nth-child(8){
	width: 70px;
	text-align: center;
}
.m-td:nth-child(9){
	width: 70px;
		text-align: center;
}
.m-td:nth-child(10){
	width: 100px;
	text-align: center;
}
.m-td:nth-child(11){
	width: 100px;
	text-align: center;
}
</style>
